<template>
  <el-form>
    <el-form-item label="用户名">
      <el-input v-model.trim="user.username" readonly="readonly"/>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model.trim="user.phone" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model.trim="user.email" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model.trim="user.password" show-password/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateAccount">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import student from "@/api/student"
export default {

  
  data() {
    return {
    //方式二
    //  user:{}
    }
  },
  created(){
    this.fetchData()
      
  },
  //这个props属性是用来接收父组件index.vue传过来的user对象，这里可以用用两种方法做数据回显：1.在父组件中写fetchData函数并通过<account :user="user" />
  //把user对象传到子组件Account.vue然后做数据回显，2.在子组件中写fetchData函数并直接渲染数据
  //方式二明显更简单，我第一次写的时候是在子组件Account中写fetchData函数并直接渲染数据，并在data里定义了user对象，但是一直显示不出来，
  //于是我用方式一，发现可以，然后我把这里的props属性删掉了，发现也可以，这是为什么呢？原因是涉及到props和data的优先级问题，v-model绑定的数据
  //肯定是先找props里的user对象，我第一次的时候只在子组件Account中写fetchData函数并赋给data里的user，并且这里还定义了props里的user(这是模版写好的
  //明显人家想让你用父组件给子组件传递数据)，有两个user的情况下肯定找props里的user，但是我在父组件index.vue中还没有为子组件传值，那肯定props里的user
  //是空，那就肯定显示不出来，当我把props属性删掉之后，那么v-model就能找到data里的user了，就能显示出来了

  //方式一
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          id, 
          username: '',
          email: '',
          phone:'',
          password:''
        }
      }
    }
  },
  methods: {
    //方式二
    // fetchData(){
    //   student.getUser().then(Response=>{
    //     this.user=Response.data
    //   })
    // },
    updateAccount() {
      student.updateAccount(this.user).then(Response=>{
        if(Response.code==20000){
          this.$message({
          message: '修改成功',
          type: 'success',
      })
        }
        
      })
      
    }
  }
}
</script>
